<template>
  <div class="box">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/home">题库管理</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div  class="operate">
      <div style="padding:10px">
        <div class="add">
          <el-button type="primary" @click="addbank">添加题库</el-button>
        </div>
        <div class="bankname">请输入题库名：</div>

        <div class="input">
          <el-input v-model="key" class="w-50 m-2" placeholder="请输入想要查找的题库名" @change="search" />
        </div>
        <div class="check">
          <el-checkbox @change="checkboxban" label="只看禁用" size="large" />
          <el-checkbox @change="checkboxpublish" label="只看发布" size="large" />
        </div>
      </div>
      <el-skeleton :rows="6" :loading="loading" animated>
        <el-table class="table" v-loading="VLoading" border :data="tableData">
          <el-table-column prop="qbname" label="题库名" width="280" />
          <el-table-column prop="qbexplain" label="描述" width="280" />
          <el-table-column label="标签" width="150">
            <template #default="scope">
              <el-tag disable-transitions>
                {{ scope.row.qblabel }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="数量" width="150">
            <template #default="scope">
              <el-tag disable-transitions>
                {{ scope.row.qbcount }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布" width="150">
            <template #default="scope">
              <el-tag :type="scope.row.qbispublic === 0 ? 'warning' : 'success'" disable-transitions>{{
                  scope.row.qbispublic === 0 ? "否" : "是"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="禁用" width="150">
            <template #default="scope">
              <el-tag :type="scope.row.qbisban === 0 ? 'success' : 'warning'" disable-transitions>
                {{ scope.row.QBIsqbisbanBan === 0 ? "否" : "是" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="240px">
            <template #default="scope">
              <el-button type="primary" @click="bankdetalis(scope)" size="small">
                详情
              </el-button>
              <el-button v-if="scope.row.qbispublic === 1" :type="scope.row.qbisban === 0 ? 'warning' : 'success'"
                @click="IsBan(scope)" size="small">
                {{ scope.row.qbisban === 0 ? "禁用" : "启用" }}
              </el-button>
              <el-button v-if="scope.row.qbispublic === 0" :type="scope.row.qbispublic === 0 ? 'success' : 'info'"
                @click="IsPublish(scope)" size="small">
                {{ scope.row.qbispublic === 0 ? "发布" : "取消" }}
              </el-button>
              <el-button v-if="scope.row.qbispublic === 0" @click="Delete(scope)"
                :type="scope.row.qbispublic === 0 ? 'danger' : 'info'" size="small">
                {{ scope.row.qbispublic === 0 ? "删除" : "" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 50, 100]" :page-size="pages.limit" :total="pages.total">
          </el-pagination>
        </div>
      </el-skeleton>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import router from "@/router";
import { Bank } from "@/utils/Exam/bank/bank";
import { QuestionBank } from "@/api/Product/exaam";
import { ElMessage } from "element-plus";

const _exam = new QuestionBank();

export default defineComponent({
  setup() {
    const data = reactive<Bank>({
      tableData: [],
      key: "",
      timekey: "",
      checkbox: 0,
      pages: {
        page: 1,
        limit: 5,
        total: 10,
      },
      checkboxban: -1,
      checkboxpublish: -1,
      VLoading: false,
      loading: true,
    });
    const methods = {
      GetQuestionBank() {
        data.VLoading = true,
          _exam.GetQuestionBank({
            page: data.pages.page,
            limit: data.pages.limit,
            key: data.key,
            isBan: data.checkboxban,
            IsPublic: data.checkboxpublish,
          }).then((res:any) => {
            data.loading = false;
            if (res.code === 0) {
              data.VLoading = false,
                data.tableData = res.data.data
              data.pages.total = res.data.total
            }
          })
      },
      //模糊查询
      search(val: any) {
        data.key = val;
        methods.GetQuestionBank();
      },
      checkboxban(val: any) {
        data.checkboxban = val == true ? 1 : 0;
        methods.GetQuestionBank();
      },
      checkboxpublish(val: any) {
        data.checkboxpublish = val == true ? 1 : 0;
        methods.GetQuestionBank();
      },
      handleSizeChange(val: number) {
        data.pages.limit = val;
        methods.GetQuestionBank();
      },
      handleCurrentChange(val: number) {
        data.pages.page = val;
        methods.GetQuestionBank();
      },
      //添加题库
      addbank() {
        router.push("/questionBank/addBank");
      },
      //详情
      bankdetalis(val: any) {
        router.push("/questionBank/dateliBank/" + val.row.qbid);
      },
      Delete(val: any) {
        let questionbank = [
          {
            qbid: val.row.qbid,
          },
        ];
        _exam.DeleteQuestionBank(questionbank).then((res: any) => {
          if (res.code === 0) {
            ElMessage.success(res.message)
            methods.GetQuestionBank();
          } else {
            ElMessage.success(res.message)
            methods.GetQuestionBank();
          }
        })
      },
      //禁用
      IsBan(val: any) {
        let questionbank = [
          {
            qbid: val.row.qbid,
          },
        ];
        _exam.IsBanQuestionBank(questionbank).then((res: any) => {
          if (res.code === 0) {
            ElMessage.success(res.message)
            methods.GetQuestionBank();
          } else {
            ElMessage.success(res.message)
          }
        });
      },
      //发布
      IsPublish(val: any) {
        let questionbank = [
          {
            qbid: val.row.qbid,
          },
        ];
        _exam.IsPublishQuestionBank(questionbank).then((res: any) => {
          if (res.code === 0) {
            ElMessage.success(res.message)
            methods.GetQuestionBank();
          } else {
            ElMessage.success(res.message)
          }
        });
      },
    };
    onMounted(() => {
      methods.GetQuestionBank();
    })
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
/* .box {
  background-color: azure;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  width: 100%;
  height: 100%;
  padding-top: 10px;
} */
.operate {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  background-color: white;
  width: 94%;
}

.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.table {
  width: 95%;
  margin: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.input {
  margin-left: 10px;
  width: 300px;
  display: inline-block;
}

.block {
  display: inline-block;
}

.check {
  margin-left: 30px;
  display: inline-block;
}

.add {
  margin-left: 50px;
  display: inline-block;
}

.delete {
  margin-left: 50px;
  display: inline-block;
}

.paging {
  margin: 20px;
}

.bankname {
  display: inline-block;
  margin-left: 20px;
  padding: 5px;
}
</style>
